<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card >
        <el-row>
            <el-col>
                <el-button type="primary">添加角色</el-button>
            </el-col>
        </el-row>

        <!-- 角色列表区域 -->
        <el-table :data="roleList" style="width: 100%" border stripe>
           <el-table-column type="index"  />
           <el-table-column prop="roleName" label="角色名称"  />
           <el-table-column  label="操作" >
          <!-- scope是一个插槽 -->
          <template #default="scope">  
            <!-- 编辑按钮 -->
            <el-button size="small"  @click="showEditDialog( scope.row.id)">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button size="small" type="danger" @click="deleteById( scope.row.id)" >删除</el-button>
            <!-- 分配权限 -->
            <el-button size="small" type="warning" @click="deleteById( scope.row.id)" >分配权限</el-button>
          </template>
        </el-table-column>
        </el-table>
    </el-card>


  </div>
</template>

<script>
export default {
  data(){
    return{

    }
  },

  created(){

  },

  methods:{
        
  }

}
</script>

<style lang="less" scoped>

</style>